<template>
	<view>
		<!-- 翻页 -->
		<view class="d-c-c" style="margin-top: 5vh;">
			<view class="f30 fb gray3">
				{{ current+1 }}  /  {{ total }}
			</view>
		</view>
		<view class="writebox">
			<view class="">
				<view class="detecbox_item" v-for="(item, index) in list" :key="index" v-if="index == current">
					<view class="writetext f30 fb">{{ item.word }}</view>
					<view class="mt10" style="margin-bottom: 4vh;">
						<u-icon name="volume" color="#999999" size="30" @tap="getVoice(item.word)"></u-icon>
					</view>
					<view class="detecbox_item_opi" :class="{'detecbox_item_opi2':selectIndex == oindex}" v-for="(oitem, oindex) in item.options_list" :key="oindex" @tap="selectOptions(oindex, item)">
						{{ oitem }}
					</view>
					<view class="d-b-c writebox_czuo" >
						<view class="writebox_czuo_item" @tap="next">跳过此题</view>
						<view class="writebox_czuo_item" @tap="lookAnswer(index)">查看答案</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				ids: '',
				list: [],
				current: 0,
				total: 1,
				rightIndex: 5, //第几项是正确选项，给予不同样式 
				selectIndex: 5,
				rightVoiceSrc: '/static/audio/check_right.mp3',
				wrongVoiceSrc: '/static/audio/check_wrong.mp3',
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.ids) {
					this.ids = option.ids
					this.getList()
				} else {
					uni.navigateBack()
				}
				// const commonData = this.$store.state.commonData
				// this.rightVoiceSrc = commonData.right_voice
				// this.wrongVoiceSrc = commonData.wrong_voice
			}
		},
		methods: {
			getList() {
				this.$u.post(this.$u.api.wordsByIds, {
					ids: this.ids
				}).then((res) => {
					let data = res.data
					this.list = []
					for (let i=0;i<data.length;i++) {
						let item = data[i]
						let options_list = item.options.split(',')
						item.options_list = options_list
						for (let j=0;j<options_list.length;j++) {
							let answer_array = options_list[j].split(':')
							if (item.answer == answer_array[0]) {
								item.answer_key = j
							}
						}
						this.list.push(item)
					}
					this.total = data.length
				}).catch((err) => {
					console.log(err)
				})
			},
			// 获取单词音频
			getVoice(word) {
				this.$u.post(this.$u.api.wordVoice, {
					word: word,
					type: this.$store.state.voiceType
				}).then((res) => {
					// 播放音频
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 选择哪一项
			selectOptions(i, e){
				this.selectIndex = i
				if (i == e.answer_key) {
					// console.log(this.rightVoiceSrc)
					this.utils.playAudio(this.rightVoiceSrc)
				} else {
					// console.log(this.wrongVoiceSrc)
					this.utils.playAudio(this.wrongVoiceSrc)
				}
				setTimeout(() =>{
					this.next()
				}, 800)
			},
			// 跳过此题
			next() {
				if (this.current + 1 < this.total) {
					this.current++
					this.selectIndex = 5
				} else {
					uni.$u.toast('识词冲关结束')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/indexhome/review'
						})
					}, 1500)
				}
			},
			// 查看答案
			lookAnswer(i) {
				let item = this.list[i]
				this.selectIndex = item.answer_key
			},
		}
	}
</script>

<style lang="less">
	.writebox {
		margin: 0 auto;
		text-align: center;
		padding: 30rpx;

	}
	.writetext{
		font-size: 70rpx;
	}
	.writebox_inp {
		margin-top: 100rpx;
		font-size: 30rpx;
		padding: 10rpx;
		border-bottom: 1rpx dashed #999999;
		width: 300rpx;
		margin: 120rpx auto 0;
	}

	.berboxz {
		border: 1rpx solid #999999;
		border-radius: 100%;
		width: 50rpx;
		height: 50rpx;
	}
	.writebox_czuo{
		margin-top: 7vh;
		.writebox_czuo_item{
			width: 182rpx;
			height: 66rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			line-height: 66rpx;
			font-size: 24rpx;
		}
	}
	.writebox_inp_check{
		width: 188rpx;
		height: 188rpx;
		margin: 50rpx auto 0;
		border-radius: 100%;
		background-color: #4599FB;
	}
	.writebox_inp_close{
		width: 188rpx;
		height: 188rpx;
		margin: 50rpx auto 0;
		border-radius: 100%;
		background-color: #FE6C1A;
	}
	.detecbox_item {
		padding: 2vh 20rpx 0;
	}
	
	.detecbox_item_sub {
		font-weight: 800;
		font-size: 70rpx;
		color: #387BEF;
	}
	
	.detecbox_item_tishi {
		height: 200rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		color: #888888;
		font-size: 30rpx;
	}
	
	.detecbox_item_opi {
		width: 650rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height: 110rpx;
		margin: 0 auto 20rpx;
	}
	.detecbox_item_opi2 {
		width: 650rpx;
		height: 110rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		color: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height: 110rpx;
		margin: 0 auto 20rpx;
	}
</style>
